<template>
  <el-carousel
    :interval="5000"
    height="520px"
    indicator-position="outside"
    arrow="always"
    style="z-index: 0"
  >
    <el-carousel-item :key="0">
      <div class="banner" id="banner1">
        <div class="banner-bgdarkener">
          <ElRow>
            <ElCol :xs="1" :sm="2" :md="3" :lg="3" :xl="3"></ElCol>
            <ElCol :xs="22" :sm="20" :md="16" :lg="14" :xl="14">
              <div style="height: 200px" />
              <h2 class="banner-heading">
                Consulting: An Online and Offline Interaction
              </h2>
              <p class="banner-text">
                LID-CBALT provides consulting service for LID projects including
                condition and feasibility evaluation of LID facility and
                site-based "higher-performance and lower-cost" LID layout.
              </p>
              <button v-on:click="jumpto('toolkit')">START TO USE</button>
            </ElCol>
          </ElRow>
        </div>
      </div>
    </el-carousel-item>
    <el-carousel-item :key="1">
      <div class="banner" id="banner2">
        <div class="banner-bgdarkener">
          <ElRow>
            <ElCol :xs="1" :sm="2" :md="3" :lg="3" :xl="3"></ElCol>
            <ElCol :xs="22" :sm="20" :md="16" :lg="14" :xl="14">
              <div style="height: 200px" />
              <h2 class="banner-heading">
                Training: An Easy-to-use Learning Platform
              </h2>
              <p class="banner-text">
                LID-CBALT provides a detailed online tutorial to help users
                learn how to obtain the optimal LID layout with a quantitative
                method in the testing area.
              </p>
              <button v-on:click="jumpto('tutorial')">
                WATCH THE INSTRUCTION
              </button>
            </ElCol>
          </ElRow>
        </div>
      </div>
    </el-carousel-item>
    <el-carousel-item :key="2">
      <div class="banner" id="banner3">
        <div class="banner-bgdarkener">
          <ElRow>
            <ElCol :xs="1" :sm="2" :md="3" :lg="3" :xl="3"></ElCol>
            <ElCol :xs="22" :sm="20" :md="16" :lg="14" :xl="14">
              <div style="height: 200px" />
              <h2 class="banner-heading">
                Promotion and Education: Taking "Higher-performance and
                Lower-cost" as the Core Value for Promoting UN SDGs
              </h2>
              <p class="banner-text">
                LID-CBALT encourages people to make full use of limited
                resources in a sustainable and efficient manner, which not only
                contribute to increasing the quantity of LID practices and
                improving the quality of LID facility layout plan, but also
                promote the concept of "higher-performance and lower-cost".
              </p>
              <button v-on:click="jumpto('casestudy')">GET THE RESULT</button>
            </ElCol>
          </ElRow>
        </div>
      </div>
    </el-carousel-item>
    <el-carousel-item :key="3">
      <div class="banner" id="banner4">
        <div class="banner-bgdarkener">
          <ElRow>
            <ElCol :xs="1" :sm="2" :md="3" :lg="3" :xl="3"></ElCol>
            <ElCol :xs="22" :sm="20" :md="16" :lg="14" :xl="14">
              <div style="height: 200px" />
              <h2 class="banner-heading">The Team</h2>
              <p class="banner-text">
                Our research team is led by Professor Lin Guangsi from the
                Department of Landscape Architecture, South China University of
                Technology. The main members of the research team are 8 students
                majoring in Landscape Architecture and civil and Hydraulic
                Engineering. The web page was produced with technical support
                from two students majoring in Computer Technology and
                Application and Interaction Design.
              </p>
              <button v-on:click="jumpto('getintouch')">OUR TEAM</button>
            </ElCol>
          </ElRow>
        </div>
      </div>
    </el-carousel-item>
  </el-carousel>
  <div id="intro">
    <ElRow>
      <ElCol :xs="1" :sm="2" :md="3" :lg="3" :xl="3"></ElCol>
      <ElCol :xs="20" :sm="14" :md="13" :lg="11" :xl="11">
        <div class="line"></div>
        <span class="projname">LID-CBALT</span>
        uses research adopted
        <b>multi-objective evolutionary algorithm (MOEA)</b>
        , through the construction of the hydrological model, the construction
        of the cost-benefit model and research about the LID facilities layout,
        and the design and application of the LID facilities. <br /><br />
        <b>
          It solves the problems of the idleness of cost and the effect
          reduction
        </b>
        caused by ambiguity recognition of the input and output in the actual
        construction process of LID facilities. At the same time,
        <b>it provides theoretical basis for planning and design</b>
        to deal with urban waterlogging more scientifically.
      </ElCol>
    </ElRow>
  </div>
</template>
<script>
export default {
  name: "Home",
  emits: ["change-comp"],
  methods: {
    jumpto(path) {
      console.log("emit event change-comp:" + path);
      this.$emit("change-comp", path);
    },
  },
};
</script>

<style scoped>
.banner {
  height: 520px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
  margin-bottom: 10px;
  text-align: left;
}
#banner1 {
  background-image: url("http://lid-cbalt.com/data/images/bg1-home.jpg");
}
#banner2 {
  background-image: url("http://lid-cbalt.com/data/images/bg2-home.jpg");
}
#banner3 {
  background-image: url("http://lid-cbalt.com/data/images/bg3-home.jpg");
}
#banner4 {
  background-image: url("http://lid-cbalt.com/data/images/bg4-home.jpg");
}
.banner-bgdarkener {
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  vertical-align: bottom;
  padding: 0 20px 0 20px;
}
.banner-heading {
  font-family: "Arial Negreta", "Arial Normal", "Arial";
  font-weight: 700;
  font-style: normal;
  font-size: 30px;
  color: #6cdb9f;
  margin-top: 0px;
}
.banner-text {
  height: 85px;
  font-family: "Arial Normal", "Arial";
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  color: #ffffff;
}
button {
  border-width: 2px;
  border-style: solid;
  border-color: rgba(255, 255, 255, 1);
  border-radius: 15px;
  background-color: rgba(31, 136, 79, 1);
  width: 274px;
  height: 46px;
  font-family: "Arial Negreta", "Arial Normal", "Arial";
  font-weight: 700;
  font-style: normal;
  font-size: 16px;
  text-decoration: underline;
  color: #ffffff;
}
#intro {
  text-align: left;
  margin-top: 50px;
  margin-left: 20px;
  font-size: 1.2rem;
  margin-bottom: 250px;
}
.line {
  width: 60%;
  height: 5px;
  background: inherit;
  background-color: #91b354;
  margin-bottom: 10px;
}
.projname {
  font-family: "Arial Negreta", "Arial Normal", "Arial";
  font-weight: 700;
  font-size: 20px;
  color: #91b354;
}
</style>